<link rel="stylesheet" type="text/css" href="<?= $base_url ?>css/meeting/view.css"/>
<div class="meeting">
    <div class="view">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span12">
                    <div class="tabbable">
                        <ul class="nav nav-tabs" id="tab-meeting" style="font-family:Georgia; font-weight:bold">
                            <li class="active"><a href="#view" data-toggle="tab">View Meetings</a></li>
                            <li><a href="#record" data-toggle="tab">Record Meeting</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="view">
                                <h3 style="font-family:Georgia"> List of Meetings </h3>
                                <div class="row-fluid span11">
                                    <div class="span12 meeting-table">
                                        <div class="meeting-table-head row-fluid">
                                            <div class="span2">
                                                Meeting Name
                                            </div>
                                            <div class="span2">
                                                Location
                                            </div>
                                            <div class="span2">
                                                Date
                                            </div>
                                            <div class="span1">
                                                Time
                                            </div>
                                            <div class="span1">
                                                Status
                                            </div>
                                            <div class="span1">
                                                Recorder
                                            </div>
                                            <div class="span1">

                                            </div>
                                        </div>
                                        <div class="meeting-table-body row-fluid">
                                        <?php
                                        foreach ($meetings as $row) {
                                        echo '
                                                <div class="meeting-table-row"><a href="'.$base_url.'meeting/viewmeeting/'.$row['ID'].'" class="row-fluid">
                                                    <span class="span2">
                                                        '.$row['MeetingName'].'
                                                    </span>
                                                    <span class="span2">
                                                        '.$row['Location'].'
                                                    </span>
                                                    <span class="span2">
                                                        '.date_format(date_create($row['Date']), 'm/d/Y').'
                                                    </span>
                                                    <span class="span1">
                                                        '.$row['Time'].'
                                                    </span>
                                                    <span class="span1">
                                                        '.$row['Status'].'
                                                    </span>
                                                    <span class="span3">
                                                        '.$row['Recorder'].'
                                                    </span>
                                                    <span class="span2">
                                                        <a href =meeting/remove/'.$row['ID'].'>Remove<a>
                                                    </span>

                                                    </a>
                                                </div>
                                                ';
                                        }
                                        ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="record">
                                <div class="container-fluid">
                                    <div class="row-fluid">
                                        <div class="span12">

                                            <?php echo form_open('meeting/record', array(
                                                'id' => 'form_record_meeting'
                                            ))?>
                                            <form id = "" style="font-family:Georgia; font-size:20px; color:#00F; font-weight:bold">
                                                <fieldset>
                                                     <legend>Basic Information</legend>
                                                     <label>Meeting Name:</label>
                                                     <input type="text" id="input-name" name="input_name" />

                                            <div class="row-fluid">
                                                <div class="span6">
                                                <label for="input-date">Date</label>
                                                <input type="text" id="input-date" name="input_date">
                                                </div>
                                                <div class="span6">
                                                 <label for="input-time">Time</label>
                                                <input type="text" id="input-time" name="input_time">
                                                </div>
                                            </div>
                                            <div class="row-fluid">
                                                <div class="span6">
                                                 <label for="input-location">Location</label>
                                                <!-- TODO GMaps integration, perhaps? -->
                                                <input type="text" id="input-location" name="input_location">
                                                </div>
                                                <div class="span6">
                                                <label for="input-status">Status</label>
                                                <select id="input-drop" name="input-drop">
                                                    <option value="null"></option>
                                                    <?php

                                                    foreach ($tbl as $row) {
                                                        ?>
                                                        <option value="<?php echo $row['ID'] ?>">
                                                            <?php echo $row['Description']; ?>
                                                        </option>
                                                    <?php
                                                    }
                                                    ?>
                                                </select>
                                                </div>
                                            </div>
                                            <legend>Details</legend>
                                            <div class="row-fluid">
                                                <div class="span4">
                                                    <label for="input-agenda">Agenda</label>
                                                    <textarea id="input-agenda" name="input_agenda" rows="5"
                                                    cols="200"></textarea>
                                                </div>
                                                <div class="span4">
                                                   <select id="profile_fields" name="dummy" size="13" multiple="multiple"
                                                        ondblclick="insertValueQuery()">
                                                        <?php
                                                       foreach($profiles as $profile)
                                                       {
                                                           $option = $profile['LastName'].", "
                                                               .$profile['MiddleName']." ".$profile['FirstName'];
                                                           echo "<option id =".$profile['MemberID'].">".$option."</option>";
                                                       }
                                                       ?>
                                                   </select>
                                                         <button type = 'button' id = 'btn_addAttendee' class = "btn-mini">
                                                            Add Attendee
                                                         </button>
                                                        <button type = 'button' id = 'btn_removeAttendee' class = "btn-mini">
                                                            Remove Attendee
                                                        </button>
                                                </div>
                                                <div class = "span4">
                                                   <label for="input-attendees">Attendees</label>
                                                   <select id="attendee_fields" size="13" multiple="multiple"></select>
                                                </div>
                                            </div>
                                            <br/>
                                            <center>
                                            <br/>
                                            <br/>
                                            <button id="btn_record_meeting" type="button" class="btn btn-primary">Add Meeting</button>
                                            <button type="reset" class="btn">Reset</button>
                                            </center>
                                                </fieldset>
                                                <input id="id_list" type="hidden" name = "id_list">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<br/>

<script type = 'text/javascript'>
    jQuery.noConflict();

    $(function(){
        $('#input-date').datepicker();
        $('#input-time').timepicker({
            showPeriod: true,
            showLeadingZero: true
        });

    })

    $('#btn_addAttendee').click(
        function(){
            selectedOption = $('#profile_fields option:selected');
            nameToAdd = selectedOption.html();
            if(nameToAdd!=null)
            {
                attendees = $('#attendee_fields')
                attendees.html(attendees.html() +
                    "<option id='"+selectedOption.attr('id')+"'>"
                    + selectedOption.html() +
                    "</option>");
                selectedOption.remove();
            }
        }
    )

    $('#btn_removeAttendee').click(
        function(){
            selectedOption = $('#attendee_fields option:selected');
            nameToAdd = selectedOption.html();
            if(nameToAdd!=null)
            {
                attendees = $('#profile_fields')
                attendees.html(attendees.html() +
                    "<option id='"+selectedOption.attr('id')+"'>"
                    + selectedOption.html() +
                    "</option>");
                selectedOption.remove();
            }
        }
    )

    $('#btn_record_meeting').click(
        function(){
            var options = $('#attendee_fields').find('option');
            id_list = "";
            ctr = 0;
            for(ctr = 0; ctr<options.length; ctr++){
                id_list+=options[ctr].id + " ";
            }
            $('#id_list').val(id_list);
            $('#form_record_meeting').submit();
        }
    )
</script>
